<template>
	<el-drawer
		v-model="drawerVisible"
		:title="title"
		size="80%"
		:destroy-on-close="true"
		@close="handleClose"
	>
		<div class="p-4">
			<!-- 搜索和导出区域 -->
			<div class="mb-4 flex justify-between items-center">
				<div class="flex items-center gap-2">
					<div class="w-100">车牌号：</div>
					<el-input
						v-model="searchKeyword"
						placeholder="请输入车牌号"
						class="w-60"
						clearable
					/>
					<el-button type="primary" @click="handleSearch">查询</el-button>
				</div>
				<el-button type="primary" @click="handleExport">导出</el-button>
			</div>

			<!-- 表格 -->
			<BasicTable
				:data="filteredTableData"
				:option="tableColumns"
				:table-loading="loading"
				:show-summary="true"
				:summary-method="getSummaries"
			>
				<!-- 操作列插槽 -->
				<template #menu="{ row }">
					<el-button type="primary" link @click="handleViewDetail(row)">
						详情
					</el-button>
				</template>
			</BasicTable>
		</div>
	</el-drawer>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	fleetInfo: {
		type: Object,
		default: () => ({}),
	},
});

// 表格配置
const tableColumns = {
	showOverflowTooltip: true,
	border: true,
	menuWidth: 80,
	menuFixed: 'right',
	column: [
		{ type: 'index', label: '序号', width: 60, align: 'center' },
		{ prop: 'plateNumber', label: '车牌号', minWidth: 100 },
		{ prop: 'vehicleType', label: '车辆类型', minWidth: 100 },
		{ prop: 'energyType', label: '能源类型', minWidth: 100 },
		{ prop: 'drivingLicenseNo', label: '行驶证编号', minWidth: 120 },
		{
			prop: 'transportLicenseNo',
			label: '道路运输许可证编号',
			minWidth: 150,
		},
		{
			prop: 'monthlyTrips',
			label: '本月运单数',
			minWidth: 100,
			sortable: true,
		},
		{
			prop: 'totalTrips',
			label: '累计运单数',
			minWidth: 100,
			sortable: true,
		},
		{ prop: 'driverName', label: '司机', minWidth: 80 },
		{ prop: 'driverPhone', label: '司机联系电话', minWidth: 120 },
	],
};

const emit = defineEmits(['update:modelValue']);

const drawerVisible = ref(false);
const loading = ref(false);
const searchKeyword = ref('');

// 计算标题
const title = computed(() => {
	return `${props.fleetInfo?.fleetName || ''} - 车辆列表`;
});

// 模拟数据
const tableData = ref([
	{
		plateNumber: '川A12345',
		vehicleType: '重型货车',
		energyType: '柴油',
		drivingLicenseNo: 'DL123456789',
		transportLicenseNo: 'TL987654321',
		monthlyTrips: 45,
		totalTrips: 456,
		driverName: '张三',
		driverPhone: '13800138000',
	},
	{
		plateNumber: '川A67890',
		vehicleType: '重型货车',
		energyType: '柴油',
		drivingLicenseNo: 'DL987654321',
		transportLicenseNo: 'TL123456789',
		monthlyTrips: 55,
		totalTrips: 544,
		driverName: '李四',
		driverPhone: '13800138001',
	},
]);

// 合计方法
const getSummaries = (param) => {
	const { columns, data } = param;
	const sums = [];
	columns.forEach((column, index) => {
		if (index === 0) {
			sums[index] = '合计';
			return;
		}
		const values = data.map((item) => Number(item[column.property]));
		if (
			column.property === 'monthlyTrips' ||
			column.property === 'totalTrips'
		) {
			sums[index] = `${values.reduce((prev, curr) => prev + curr, 0)}`;
		} else {
			sums[index] = '';
		}
	});
	return sums;
};

// 过滤后的表格数据
const filteredTableData = computed(() => {
	if (!searchKeyword.value) return tableData.value;
	return tableData.value.filter((item) =>
		item.plateNumber.toLowerCase().includes(searchKeyword.value.toLowerCase()),
	);
});

// 监听抽屉显示状态
watch(
	() => props.modelValue,
	(val) => {
		drawerVisible.value = val;
		if (val) {
			loadData();
		}
	},
);

// 监听抽屉关闭
watch(drawerVisible, (val) => {
	emit('update:modelValue', val);
});

// 加载数据
const loadData = () => {
	loading.value = true;
	// TODO: 这里调用接口获取车辆列表数据
	setTimeout(() => {
		loading.value = false;
	}, 500);
};

// 搜索
const handleSearch = () => {
	loadData();
};

// 导出
const handleExport = () => {
	console.log('导出数据');
	// TODO: 实现导出功能
};

// 查看详情
const handleViewDetail = (row) => {
	console.log('查看详情:', row);
	// TODO: 实现查看详情功能
};

// 关闭抽屉
const handleClose = () => {
	drawerVisible.value = false;
	searchKeyword.value = '';
};
</script>

<style scoped>
.el-table :deep(.el-table__footer) {
	background-color: #fefce8;
}
</style>
